<template>
    <div class="">
        <mt-navbar v-model="selected" style="padding-bottom:0.1rem;">
            <mt-tab-item style="z-index: 1;" id="1">推荐</mt-tab-item>
            <mt-tab-item style="z-index: 1;" id="2">精彩生活</mt-tab-item>
            <mt-tab-item style="z-index: 1;" id="3">父母课堂</mt-tab-item>
            <mt-tab-item style="z-index: 1;" v-if="useInfo.userTypeId!=4" id="4">教师专栏</mt-tab-item>
        </mt-navbar>
            
        <!-- tab-container -->
        <mt-tab-container class="absolute_wrap" v-model="selected" >
        <mt-tab-container-item id="1" style="overflow-x:hidden;height:100%;">
            <footShow dynamicTypeId='1' :show='selected==1' ></footShow>
        </mt-tab-container-item>
        <mt-tab-container-item id="2" style="overflow-x:hidden;">
            <footShow dynamicTypeId='2' :show='selected==2' ></footShow>
        </mt-tab-container-item>
        <mt-tab-container-item id="3" style="overflow-x:hidden;">
            <footShow dynamicTypeId='3' :show='selected==3' ></footShow>
        </mt-tab-container-item>
        <mt-tab-container-item v-if="useInfo.userTypeId!=4" id="4" style="overflow-x:hidden;">
            <footShow dynamicTypeId='4' :show='selected==4' ></footShow>
            </mt-tab-container-item>
        </mt-tab-container>             
    </div>   
</template>

<script>
    export default {
        created() {
            // this.getList();
            this.getUseInfo();
        },
        data() {
            return {
                selected: '1',
                list: [],
            }
        },
        methods: {
            getUseInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
            },
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>